<template>
    <div class="main">
        <div>
            <nav-bar title="消息详情" :show-back="true"/>
        </div>
        <div class="head_div">
            <img src="../../img/record.png" class="head_img">
            <span class="head_text">付款码支付</span>
        </div>
        <div class="middle_div">
            <div class="middle_text">-{{message.money}}</div>
        </div>
        <div class="foot_div">
            <div class="foot">
                <span class="foot_left">支付时间</span>
                <span class="foot_right">{{message.dateTime}}</span>
            </div>
            <div>
                <span class="foot_left">支付用途</span>
                <span class="foot_right">{{message.purpose}}</span>
            </div>
        </div>
    </div>
</template>
<script>
import NavBar from '../../components/navbar/NavBar.vue'
export default {
    name: 'MessagePayment',
    components: {
        NavBar
    },
    props: {
        message: {
            type: Object
        }
    }
}
</script>
<style scoped>
.main{background-color: #fff; height: 100%; width: 100%}
.head_div{text-align: center; margin-top: 5%}
.head_img{width: .6rem; height: .6rem;position: relative;top: .14rem}
.head_text{font-size: 140%;}
.middle_div{text-align: center;margin-top: 3%}
.middle_text{font-size: 200%; font-weight:400}
.foot_div{margin-left: 10%; margin-top: 10%}
.foot{height: .8rem;}
.foot_left{font-size: 130%; color: gray; display: inline-block; width: 46%}
.foot_right{font-size: 130%; color: #000000c2; display: inline-block;width: 40%;text-align: right}
</style>
